<template>
  <div class="boxContent">
    <div class="appBox">
      <div class="flex_sb">
        <div class="f16">我的注册链接：{{ state.tabsData.registerlink }}</div>
        <div><el-button v-preventReClick
                     type="primary"
                     v-permission="1069"
                     @click="$router.push('/enterprise/enterpriseManagement/add')">新建企业</el-button></div>
      </div>
      <div class="flex mt10">
        <div class="tabs tab1"> 欠费企业：{{ state.tabsData.arrearsCompany }}</div>
        <div class="tabs tab2"> 正常企业：{{ state.tabsData.normalCompany }}</div>
        <div class="tabs tab3"> 即将欠费：{{ state.tabsData.willarrearsCompany }}</div>
        <div class="tabs tab4"> 意向企业：{{ state.tabsData.purposeCompany }}</div>
        <div class="tabs tab5"> 待审核：{{ state.tabsData.checkpendingCompany }}</div>
      </div>
      <div class="tabaleBox mt20">
        <el-table border
                  v-loading="state.loading"
                  :data="state.tableData"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }">
          <el-table-column prop="name"
                           label="企业名称"
                           show-overflow-tooltip
                           align="left" />
          <el-table-column prop="approveTime"
                           label="注册时间"
                           show-overflow-tooltip
                           align="center"
                           width="180" />
          <el-table-column prop="childCompanyCount"
                           label="子企业"
                           show-overflow-tooltip
                           align="center"
                           width="100">
          </el-table-column>
          <el-table-column prop="employeesNumber"
                           label="企业就职人数"
                           show-overflow-tooltip
                           align="center"
                           width="120">
          </el-table-column>
          <el-table-column prop="recruitingNumber"
                           label="已经招聘人数"
                           show-overflow-tooltip
                           align="center"
                           width="120" />
          <el-table-column prop="dimissionNumber"
                           label="企业离职人数"
                           show-overflow-tooltip
                           width="120"
                           align="center" />
          <el-table-column prop="yesterdaySign"
                           label="昨日打卡人数"
                           show-overflow-tooltip
                           align="center"
                           width="120" />
          <el-table-column prop="balance"
                           label="企业余额"
                           show-overflow-tooltip
                           align="center"
                           width="120" />
          <el-table-column prop="consumption"
                           label="累计消耗金额"
                           show-overflow-tooltip
                           align="center"
                           width="120" />
          <el-table-column prop="status"
                           label="审核状态"
                           show-overflow-tooltip
                           align="center"
                           width="120">
            <template #default="scope">
              <span v-if="scope.row.approveStatus == 0"
                    class="success">
                待审核
              </span>
              <span v-if="scope.row.approveStatus == 1"
                    class="primary">
                通过
              </span>
              <span v-if="scope.row.approveStatus == 2"
                    class="error">
                未通过
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="status"
                           label="企业状态"
                           show-overflow-tooltip
                           align="center"
                           width="120">
            <template #default="scope">

              <span v-if="scope.row.status == 0"
                    class="primary">正常</span>
              <span v-if="scope.row.status == 1"
                    class="info">停用</span>
              <span v-if="scope.row.status == 2"
                    class="warning">即将欠费</span>
              <span v-if="scope.row.status == 3"
                    class="error">欠费</span>
            </template>
          </el-table-column>

          <el-table-column prop="btns"
                           label="操作"
                           show-overflow-tooltip
                           align="center"
                           width="170"
                           fixed="right">
            <template #default="scope">
              <div class="btnsDatil flex_sa">
                <!-- 其它操作 -->

                <div @click="methods.handleAction('details', scope.row)"
                     class=""
                     v-permission="1070">编辑</div>
                <div @click="methods.handleAction('CZ', scope.row)"
                     v-if="scope.row.approveStatus == 1 "
                     class=""
                     v-permission="1071">充值</div>
                <div @click="methods.handleAction('CK', scope.row)"
                     v-if="scope.row.approveStatus == 1 && scope.row.status >= 2"
                     class=""
                     v-permission="1072">催款</div>
                <div @click="methods.handleAction('examine', scope.row) "
                     v-if="scope.row.approveStatus == 0"
                     class="success "
                     v-permission="1073">审核</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div>

      <el-dialog v-model="state.dialogVisible"
                 title="审核信息"
                 :width="$px2rem('650px')">
        <div class="drawerConcent">
          <div>
            <div>
              <div class="title ">审核认证</div>
              <div class="sub mt16 flex">
                <el-radio-group v-model="state.examineForm.radio"
                                class="ml-4">
                  <el-radio label="1"
                            size="large">通过</el-radio>
                  <el-radio label="2"
                            size="large">拒绝</el-radio>
                </el-radio-group>

              </div>
              <div v-if="state.examineForm.radio == '2'">
                <el-input class="mt10"
                          style="width: 300px"
                          placeholder="请填写未通过理由"
                          clearable
                          v-model="state.examineForm.refuseRemake"></el-input>
              </div>
              <div v-if="state.examineForm.radio == '1'">
                <div class="flex_sb mt10 inputs">
                  <el-form-item label="月休假天数:">
                    <el-input v-model="state.examineForm.num1"
                              @input="state.examineForm.num1 = $input.inputLimit('D10005',state.examineForm.num1)"
                              placeholder="请输入月休假天数"></el-input>
                  </el-form-item>
                  <el-form-item label="可欠费天数:">
                    <el-input v-model="state.examineForm.num2"
                              @input="state.examineForm.num2 = $input.inputLimit('D10005',state.examineForm.num2)"
                              placeholder="请输入可欠费天数"></el-input>
                  </el-form-item>
                  <el-form-item label="未到岗天数:">
                    <el-input v-model="state.examineForm.num3"
                              @input="state.examineForm.num3 = $input.inputLimit('D10005',state.examineForm.num3)"
                              placeholder="请输入未到岗天数"></el-input>
                  </el-form-item>
                </div>
                <div class="mt10">
                  <el-radio-group v-model="state.examineForm.radio1"
                                  class="ml-4">
                    <el-radio label="1"
                              size="large">岗位预充值</el-radio>
                    <el-radio label="0"
                              size="large">无需预充值发布岗位</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>

            <div class="tar mt16 ">
              <el-button v-preventReClick
                         type=""
                         @click="state.dialogVisible = false">取消</el-button>
              <el-button v-preventReClick
                         type="primary"
                         @click="methods.btnSub">提交</el-button>
            </div>
          </div>
        </div>
      </el-dialog>

      <el-dialog v-model="state.dialogQrcode"
                 title="新增充值"
                 :width="$px2rem('550px')">
        <el-form :model="state.form"
                 label-width="auto"
                 ref="formBox"
                 :rules="state.rules"
                 style="max-width: 620px;padding: 30px;">
          <el-form-item label="充值方式："
                        prop="select">
            <el-select v-model="state.form.select"
                       disabled
                       placeholder="请选择充值方式"
                       style="width: 100%;">
              <el-option label="扫码支付"
                         value="扫码支付"></el-option>
              <el-option label="线下支付"
                         value="线下支付"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="充值金额："
                        prop="input">
            <el-input v-model="state.form.input"
                      placeholder="请输入充值金额"
                      @input="state.form.input = $input.inputLimit('D10008',state.form.input)"></el-input>
          </el-form-item>

          <div class="ml12">
            注： 充值金额只能用于兜兜智聘招聘平台消耗，消耗后才可开具发票；
          </div>

          <div class="tar mt20">
            <el-button v-preventReClick
                       type=""
                       @click="state.dialogQrcode = false">取消</el-button>
            <el-button v-preventReClick
                       type="primary"
                       @click="methods.handleAction('tj')">提交</el-button>
          </div>
        </el-form>
      </el-dialog>

      <el-dialog v-model="state.dialogQrcode1"
                 title="确定充值"
                 @close="methods.qxQrcode"
                 :width="$px2rem('400px')">
        <div class="mt20 QRBox flex_c flex-direction">
          <img :src="state.QRImgUrl"
               class="qrimg" />
          <div class="flex_c mt20"
               v-if="state.countdown>0">订单支付有效期倒计时：<van-count-down :time="state.countdown" /></div>
          <div class="flex_c mt20 error"
               v-if="state.countdown<=0">支付订单已过期，请重新生成订单</div>
          <div class="mt20 mb20 tac">
            <el-button v-preventReClick
                       @click="methods.qxQrcode">取消</el-button>
          </div>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script setup>
import QRCode from 'qrcode'
import { onMounted, reactive, getCurrentInstance } from "vue";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
import area from "@/utils/area.js";
const initState = () => {
  return {
    examineForm: {
      radio: '1',
      radio1: '1',
      refuseRemake: '',
      num1: '',
      num2: '',
      num3: '',
      data: {
        vacation: "",
        isCheckPositionPublishMoney: "",
        checkPositionPublishAmount: "",
        notWorkDays: "",
        debtDay: "",
      },
    },
    countdown: 1000 * 60 * 30,
    QRImgUrl: '',
    dialogQrcode1: false,
    loading: false,
    dialogVisible: false,
    dialogQrcode: false,
    radioValue: '1',
    inputValue: '',
    form: {
      select: '扫码支付',
      input: ''
    },
    tabsData: {},
    totalSize: 0,
    tableData: [],
    params: {
      pageNum: 1,
      // descs: ["id"],
      pageSize: 10,
    },
    totalInputColumns: [
      { key: "name", label: "填写企业名称", type: "input" },
      { key: "companyType", label: "选择公司类型", type: "select" },
      { key: "cityArr", label: "选择所在城市", type: "select" },
      { key: "sectorId", label: "选择行业", type: "select" },
      { key: "scale", label: "选择规模", type: "select" },
      { key: "approveStatus", label: "选择审核状态", type: "select" },
      { key: "status", label: "选择企业状态", type: "select" },
    ],
    orderNum: '',
    orderNumId: '',
    QRlink: '',
    optionsPre: [],
    scaleData: [],
    optionsSec: [],
    drawerData: {},
    qrcodeData: {},
    times: null,
  };
};
const state = reactive(initState());
onMounted(() => {
  state.optionsPre = JSON.parse(localStorage.getItem("profession"));
  state.scaleData = JSON.parse(localStorage.getItem("staffSize"));
  state.propsCity = area;
  methods.getDataList();
  state.propsCity = area;
  state.optionsSec = JSON.parse(localStorage.getItem("profession"));
});
const methods = {

  qxQrcode () {
    state.dialogQrcode = false
    state.dialogQrcode1 = false
    clearInterval(state.times)
  },
  getQRparams () {
    let userInfor = JSON.parse(localStorage.getItem('userInfor'))
    let data = {
      "amount": state.form.input * 100,
      "clientCName": state.qrcodeData.name,
      "clientCid": state.qrcodeData.cid,
      "payType": 'qrcode',
      "uid": userInfor.uid,
      "uname": userInfor.userName,
      comments: 'xxx'
    }
    app.$httpx.post('/xrw-finace/order/create', data).then(res => {
      console.log(res.code);
      if (res.code == 200 && res.data) {
        state.orderNum = res.data.orderNo
        state.orderNumId = res.data.id
        methods.getQRcodeData()
      }
    })
  },
  getQRcodeData () {
    app.$httpx.get('/xrw-finace/order/generate/qrcode?orderNo=' + state.orderNum).then(res => {
      if (res.code == 200 && res.data) {
        state.QRlink = res.data.codeUrl
        methods.getQRcode()
        state.times = setInterval(() => {
          methods.payType()
        }, 5000)
      } else {
        ElMessage({
          message: res.data.message,
          type: 'error'
        })
      }
    })
  },
  getQRcode () {
    let opts = {
      errorCorrectionLevel: "L",//容错级别
      type: "image/png",//生成的二维码类型
      quality: 0.3,//二维码质量
      margin: 5,//二维码留白边距
      width: 128,//宽
      height: 128,//高
      text: "百度",//二维码内容
      color: {
        dark: "#666666",//前景色
        light: "#fff"//背景色
      }
    };
    QRCode.toDataURL(state.QRlink, opts, (err, url) => {
      if (err) throw err
      //将生成的二维码路径复制给data的QRImgUrl
      state.QRImgUrl = url
      console.log(state.QRImgUrl);
    })
  },
  payType () {
    app.$httpx.get('/xrw-finace/order/qrcode/pay/status?orderNo=' + state.orderNum).then(res => {
      console.log(res);
      if (res.data == '支付完成') {
        ElMessage({
          message: '支付完成',
          type: 'success'
        })
        clearInterval(state.times)
        state.dialogQrcode = false
        state.dialogQrcode1 = false
        methods.getDataList()
      }
    })
  },
  btnSub () {
    let data = {
      cids: [state.drawerData.cid],
      "debtDay": state.examineForm.num2,
      "isCheckPositionPublishMoney": state.examineForm.radio1,
      "vacation": state.examineForm.num1,
      "notWorkDays": state.examineForm.num3,
      "approveStatus": state.examineForm.radio,
      "approveReason": state.examineForm.refuseRemake
    }
    app.$post('company/approveCompanyBatch', data).then(res => {
      if (res.code == 200) {
        state.examineForm.num1 = ''
        state.examineForm.radio = '1'
        state.examineForm.radio1 = '0'
        state.examineForm.num2 = ''
        state.examineForm.num3 = ''
        ElMessage.success('已审核')

        state.dialogVisible = false;
        methods.getDataList();
      }
    })

  },
  handleAction (type, data) {
    switch (type) {
      case "query": //查询
        methods.getDataList();
        break;
      case "tj": //查询
        if (state.form.input == '' || state.form.input == null) {
          return ElMessage.error('请输入充值金额')
        }
        state.dialogQrcode1 = true
        methods.getQRparams()

        break;
      case "reset": // 重置
        state.params = initState().params;
        break;
      case "details": // 编辑
        router.push("/enterprise/enterpriseManagement/add?id=" + data.cid);
        break;
      case "SH": // 编辑
        router.push("/enterprise/enterpriseManagement/add?id=" + data.cid);
        break;
      case "CZ": // 编辑
        state.qrcodeData = data
        state.dialogQrcode = true
        break;
      case "CK": // 编辑
        app.$post('/companywalletflow/sendNote', { cid: [data.cid] }).then(res => {
          if (res.code == 200) {
            ElMessage.success('催款成功')
          }
        })
        break;
      case "examine": // 审核
        state.drawerData = data
        methods.getAllocation()
        state.dialogVisible = true
        // data.cityArr = data.province + "/" + data.city + "/" + data.district;
        // data.licenseImg = JSON.parse(data.license).map((url) => url.url);
        // state.drawerData = data;

        // state.dialogVisible = true;
        break;
      case "delete": // 删除
        ElMessageBox.confirm("请确认是否删除该招聘企业?", "删除招聘企业", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            app.$http.get("/company/deleteById?id=" + data.id).then((res) => {
              methods.getDataList();
              ElMessage({
                type: "success",
                message: "已删除",
              });
            });
          })
        break;
    }
  },
  getAllocation () {
    app.$get('sysconfig/getBusinessConfig?cid=' + state.drawerData.cid).then(res => {
      if (res.code == 200) {
        for (let i in res.data) {
          for (let k in res.data[i]) {
            for (let j in state.examineForm.data) {
              if (j == res.data[i][k]) {
                state.examineForm.data[j] = res.data[i].filedValue
              }
            }
          }
        }
        state.examineForm.num1 = state.examineForm.data.vacation
        state.examineForm.num2 = state.examineForm.data.debtDay
        state.examineForm.num3 = state.examineForm.data.notWorkDays
        console.log(state.examineForm.data);

      }
    })
  },

  getDataList () {

    state.loading = true
    app.$get("/company/manager/information", state.params)
      .then((res) => {
        state.tableData = res.data.data;
        state.tabsData = res.data
        state.totalSize = res.data.total;
        state.loading = false
      }).catch(() => {
        state.loading = false
      })
  },
  //分页变化
  handleSizeChange (i) {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange (i) {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.appBox {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100% - 20px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .tabs {
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-right: 20px;
  }
  .tab1 {
    background: #f56c6c;
  }
  .tab2 {
    background: #409eff;
  }
  .tab3 {
    background: #e6a23c;
  }
  .tab4 {
    background: #909399;
  }
  .tab5 {
    background: #67c23a;
  }
  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .btnsDatil {
    color: #0079fe;
    cursor: pointer;
    align-items: center;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }
  ::v-deep(.el-dialog__body) {
    max-height: 380px;
  }
  .imgs {
    flex-wrap: wrap;
    .forbox {
      // width: 150px;
      height: 150px;
      margin: 10px 0 0 10px;
    }
    .imgBox {
      height: 100%;
      width: auto;
    }
    .videoBox {
      width: auto;
      height: 100%;
    }
  }

  ::v-deep(.el-drawer__title) {
    color: rgba(0, 121, 254, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-bold;
    font-weight: bold;
  }
  .drawerConcent {
    padding: 30px 20px;
    .title {
      color: rgb(16, 16, 16);
      font-size: 16px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
    }
    .flex_sb {
      align-items: center;
      flex-wrap: wrap;
      .inputShow {
        margin-top: 16px;
        width: 48%;
        min-width: 260px;
      }
    }
  }
}
</style>
